<template>
  <div>
    <p>name:{{ name }}</p>
    <p>msg:{{ msg }}</p>
  </div>
</template>

<!--<script>-->
<!--export default {-->
<!--  name: 'refChild',-->
<!--  data() {-->
<!--    return {-->
<!--      name: '张三',-->
<!--      msg: 'hello'-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    childFn(val) {-->
<!--      this.msg = val-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<script setup>
import { ref } from 'vue'
defineOptions({
  name: 'refChild'
})
const name = ref('张三')
const msg = ref('hello')
const childFn = (val) => {
  msg.value = val
}
defineExpose({
  childFn,
  name,
  msg
})
</script>

